<template>
	<div id="type_container">
		<div class="type-item" v-for="t in types" @click=clickType(t)>
			<img :src="t.icon">
			<p class="c-txt">{{t.name}}</p>
		</div>
	</div>
</template>
<script>
import phone from '@/assets/img/home/phone.png'
import charge from '@/assets/img/home/charge.png'
import care from '@/assets/img/home/personal.png'
import makeup from '@/assets/img/home/beauty.png'
import cloth from '@/assets/img/home/finery.png'
import life from '@/assets/img/home/living.png'
import food from '@/assets/img/home/food.png'
import fruit from '@/assets/img/home/fruits.png'
export default{
	name:'Type',
	data(){
		return{
			types:[{
				name: '手机',
				icon: phone,
				class_id: 34
			},{
				name: '话费',
				icon: charge,
				class_id: 35
			},{
				name: '洗护',
				icon: care,
				class_id: 36
			},{
				name: '美妆',
				icon: makeup,
				class_id: 37
			},{
				name: '服饰',
				icon: cloth,
				class_id: 38
			},{
				name: '生活',
				icon: life,
				class_id: 39
			},{
				name: '食品',
				icon: food,
				class_id: 40
			},{
				name: '水果',
				icon: fruit,
				class_id: 41
			}]
		}
	},
	methods:{
		clickType(type){
			this.$router.push( `/goods/list/${type.class_id}`)
		}
	}
}
</script>
<style lang='less' scoped>
#type_container{
	width: 100%;
	overflow: hidden;
	background: #fff;
	padding-bottom: .2rem;
	.type-item{
		width:25%;
		float: left;
		text-align: center;
		margin-top: .25rem;
		img{
			width:1.33rem;
			height: 1.33rem;
		}
	}
}
</style>